<template>
  <div class="nav-space my-container">
     <div class="sub-container1" @click="signOut()">
       退出登录
      </div>
    <user-bar :profile="data.profile" />
    <function-board />
    <div class="space-h"></div>
    <like-music :likeSongList="data.likeSongList" />
    <div class="space-h"></div>
    <song-list title="收藏歌单" :collectionList="data.collectionList" />
  </div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, reactive } from "vue";
import UserBar from "@/components/My/UserBar.vue";
import FunctionBoard from "@/components/My/FunctionBoard.vue";
import LikeMusic from "@/components/My/LikeMusic.vue";
import SongList from "@/components/My/SongList.vue";
import { getUserInfo, getUserPlaylist } from "../../api/my";
import { logOut } from '../../api/my'
import { Toast } from "vant";
import { useStore } from 'vuex'
import { useRouter } from "vue-router";

export default defineComponent({
  name: "My",
  components: {
    UserBar,
    FunctionBoard,
    LikeMusic,
    SongList,
  },
  setup() {
     const store = useStore()
     const router = useRouter();
    const data = reactive({
      profile: {},
      likeSongList: {},
      collectionList: [],
    });
    onMounted(async () => {
      const res1 = await getUserInfo();
      data.profile = res1.data.profile;
      const uid = res1.data.profile.userId;
      const res2 = await getUserPlaylist(uid);
      const playlist = res2.data.playlist;
      data.likeSongList = playlist[0];
      data.collectionList = playlist.slice(1, playlist.length);
    });
    const signOut = async () => {
      const res = await logOut()
      if(res.statusText === "OK" ){
        Toast.success("退出登录成功");
        store.commit("deleteUser");
        router.push("/discover")
      }
    }
    return {
      data,
      signOut
    };
  },
});
</script>

<style scoped>
.my-container {
  min-height: 100vh;
  padding-bottom: 300rem;
  background-color: var(--grap-color);
}

.stickyBg {
  background-color: var(--light-color);
}

.sub-container1 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40rem;
  padding: 3rem 16rem 0;
  border: 0.5px solid var(--four-level);
  border-radius: 32rem;
  font-size: 30rem;
  position: absolute;
  top: 20rem;
  left: 20rem;
}
</style>
